<template>
  <transition
    name="dialog-fade">
    <div class="print-pos" v-show="visible">
      <div style="width: 100%;height: 80px;display: flex;align-items: center;justify-content: center">
        <button v-print="printObj" class="print-btn">打印</button>
        <button class="print-btn" style="margin-left: 20px;" @click="close">取消</button>
        <div id="loading" v-show="printLoading"></div>
      </div>
      <div id="printMe">
        <div class="print_content">
          <div class="prt_title">通知</div>
          <div>{{ printData.enterpriseName }}：</div>
          <div class="ccc" style="text-indent: 2em">贵司于{{
              parseTime(printData.createTime, "{y}年{m}月{d}日")
            }}与我司签订了江津德感工业园区“西部食谷”厂房租赁合同，租赁房源编号为：
            <template v-if="!isEmpty(printData.rooms)">
              <span v-for="(item,index) in printData.rooms" :key="index">
                {{item.roomNum}}
              </span>
            </template>，按合同第五条约定:
            贵司应于{{ parseTime(printData.endDate, "{y}年{m}月{d}日") }}前支付{{
              parseTime(printData.beginDate, "{y}年{m}月{d}日")
            }}至{{ parseTime(printData.endDate, "{y}年{m}月{d}日") }}的{{ printData.feeTypeName }}{{ numToCny(moneyNum) }}(
            <input v-model="moneyNum"
                   placeholder="请输入费用"></input>元)
            ，请贵司按时支付以上费用，感谢合作。
          </div>
          <div style="text-indent: 2em">特此通知</div>
          <div class="luokuan">
            <div>重庆德感科技创业投资有限公司</div>
            <div>{{ parseTime(new Date(), "{y}年{m}月{d}日") }}</div>
          </div>
        </div>

        <div class="print_content border_no">
          <div class="prt_title">通知</div>
          <div>{{ printData.enterpriseName }}：</div>
          <div class="ccc" style="text-indent: 2em">贵司于{{
              parseTime(printData.createTime, "{y}年{m}月{d}日")
            }}与我司签订了江津德感工业园区“西部食谷”厂房租赁合同，租赁房源编号为：
            <template v-if="!isEmpty(printData.rooms)">
              <span v-for="(item,index) in printData.rooms" :key="index">
                {{item.roomNum}}
              </span>
            </template>，按合同第五条约定:
            贵司应于{{ parseTime(printData.endDate, "{y}年{m}月{d}日") }}前支付{{
              parseTime(printData.beginDate, "{y}年{m}月{d}日")
            }}至{{ parseTime(printData.endDate, "{y}年{m}月{d}日") }}的{{ printData.feeTypeName }}{{ numToCny(moneyNum) }}(
            <input v-model="moneyNum"
                   placeholder="请输入费用"></input>元)
            ，请贵司按时支付以上费用，感谢合作。
          </div>
          <div style="text-indent: 2em">特此通知</div>

          <div class="luokuan">
            <div>重庆德感科技创业投资有限公司</div>
            <div>{{ parseTime(new Date(), "{y}年{m}月{d}日") }}</div>
          </div>
        </div>

        <div class="shoukuan">
          收款单位：{{ printData.receiptAccount }}<br>
          收款账号：{{ printData.receiptAccountNum }}<br>
          开户银行：{{ printData.receiptAccountBank }}
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "PrintCom",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    printData: {
      type: Object,
      default: {
        enterpriseName: '',
        createTime: '',
        beginDate: '',
        endDate: '',
        receivableAmount: 0,
        payAmount: 0
      }
    },
  },
  watch: {
    visible(val) {
      // if (val) {
      //  this.open=true
      // } else {
      //   this.close();
      // }
    }
  },
  data() {
    return {
      open: false,
      printLoading: true,
      moneyNum: 0,
      printObj: {
        id: "printMe",
        title: '',
        extraHead: '',
        beforeOpenCallback(prt) {
          this.printLoading = true
        },
        openCallback(prt) {
          this.printLoading = false
        },
        closeCallback(prt) {

        }
      },
    }
  },
  created() {
    this.moneyNum = parseFloat(this.printData.receivableAmount) - parseFloat(this.printData.payAmount)
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped lang="scss">

.print-btn {
  cursor: pointer;
  background: #fff;
  border: none;
  width: 80px;
  height: 30px;
  border: 2px;
  color: #333;
  letter-spacing: 3px
}

.print-pos {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #efefef;
  overflow-x: scroll;
}

#printMe {
  margin: 0 auto;
  background: #fff;
  width: 1123px;
  flex-shrink: 0;
  position: relative;
}

.border_no{
  border: none !important;
}

.print_content {
  padding: 100px 100px 200px;
  width: 100%;
  font-size: 24px;
  border-bottom: 1px solid #000;
  position: relative;

  div {
    margin-bottom: 10px;
    line-height: 38px;
    letter-spacing: 2px;
    text-align: justify;
    text-justify: inter-ideograph;
  }

  .prt_title {
    width: 100%;
    text-align: center;
    font-size: 34px;
    font-weight: 600;
  }

}

.luokuan {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  bottom: 50px;
  right: 100px;
  font-size: 24px;

  div {
    margin-bottom: 10px;
    line-height: 34px;
    letter-spacing: 2px;
    text-align: justify;
    text-justify: inter-ideograph;
  }
}

input {
  border: none;
  border-bottom: 1px solid #666;
  font-size: 24px;
  width: 160px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: red;
}

input::placeholder {
  color: red;
}

.shoukuan{
  font-size: 24px;
  padding: 100px 100px 50px;
  margin-bottom: 10px;
  line-height: 38px;
  letter-spacing: 2px;
  text-align: justify;
  text-justify: inter-ideograph;
}

/*去除页眉页脚*/
@page{
  size:  auto;   /* auto is the initial value */
  margin: 3mm;  /* this affects the margin in the printer settings */
}

html{
  background-color: #FFFFFF;
  margin: 0;  /* this affects the margin on the html before sending to printer */
}

body{
  border: solid 1px blue ;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
/*去除页眉页脚*/
</style>
